<template>
	<view class="container">
		<!-- 顶部积分区域 -->
		<view class="points-area">
			<view class="points-info">
				<text class="points-title"></text>
				<view class="points-actions">
					<view>
						<button class="action-btn"></button>
					</view>
					<view>
						<button class="action-btn"></button>
					</view>
				</view>
			</view>
			<view class="points-number">
				<text class="number"></text>
			</view>
			<view class="points-description">
				<text class="description"></text>
			</view>
			<image class="star-icon" src="https://paole.hebeixiaoyu.cn/run/profile/upload/huiyuanbeijing.png"
				mode="aspectFit">
			</image>
		</view>

		<!-- 签到区域 -->
		<view class="check-in-area">
			<!-- 会员信息展示区域 -->
			<view class="member-info-container">
				<view class="member-info-box">
					<image class="member-avatar" :src="login_data.avatar" mode="aspectFill"></image>
					<view class="member-text-wrap">
						<view class="member-title-row">
							<text class="member-name">{{login_data.nikeName}}</text>
							<image v-if="isVip" class="member-tag" src="/static/image/huiyuantupian.png"
								mode="aspectFit"></image>
						</view>
						<text v-if="isVip" class="member-expire">会员到期：{{endTime}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>

	<view class="container1">
		<!-- 开通会员模块 -->
		<view class="member-open-section">
			<text class="member-open-title">开通会员</text>

			<view class="member-card">
				<text class="card-duration">1年</text>
				<text class="card-price">¥28</text>
				<text class="card-original">原价¥38-</text>
			</view>

			<!-- 协议勾选 - 修改为 :checked + @change -->
			<view class="agreement-row">
				<checkbox class="agreement-check" :checked="isAgreed" @click="handleCheckboxChange" />
				<text class="agreement-text">我已阅读并同意</text>
				<text class="agreement-link" @click="openAgreementModal">《会员服务协议》</text>
			</view>

			<!-- 续费按钮 -->
			<button v-if="isVip" class="renew-btn" @click="handleRenew">会员续费</button>
			<button v-else class="renew-btn" @click="handleRenew">会员充值</button>


			<text class="bottom-tip">开通会员可享受1年会员价购物，到期可继续续费</text>
		</view>
	</view>

	<!-- 会员协议弹窗 -->
	<view class="agreement-modal" v-if="showAgreementModal">
		<view class="modal-mask" @click="closeAgreementModal"></view>
		<view class="modal-content">
			<view class="modal-header">
				<text class="modal-title">会员服务协议</text>
				<text class="modal-close" @click="closeAgreementModal">×</text>
			</view>
			<view class="modal-body">
				<text class="agreement-content">
					欢迎阅读校园生活平台会员服务协议（以下简称"本协议"）。
					本协议是您与校园生活平台（以下简称"平台"）之间就会员服务相关事宜所订立的协议。
					请您在使用平台提供的会员服务之前，仔细阅读本协议的所有条款。
					如您不同意本协议的任何条款，您应立即停止使用平台会员服务。

					一、会员服务内容
					1. 平台会员可享受专享折扣、每月礼包、免运费等特权服务，具体权益以平台实际提供为准。
					2. 会员服务有效期为1年，自开通之日起计算。

					二、会员费用
					会员服务费用为每年28元人民币，您可选择一次性支付。

					三、续费规则
					会员到期前7天，平台将发送续费提醒，用户可选择是否续费。

					四、退费规则
					会员服务开通后不支持退费，请确认后购买。

					五、协议修改
					平台有权根据业务需要修改本协议，修改后的协议将在平台上公示。
				</text>
			</view>
			<button class="modal-btn" @click="agreeAndClose">同意并继续</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		addOrderVipInfo,
		createVipOrder,
		updateVipOrderStatus,
		selectIsVipAndVipTime
	} from "@/api/xiaoquan.js";

	const login_data = ref({});


	const endTime = ref('2005-5-5')
	const isVip = ref(false)

	onShow(async () => {
		// 搜索是否有会员，和会员到期时间。
		let data = await selectIsVipAndVipTime();
		if (data && data.data) {
			endTime.value = data.data.endTime;
			isVip.value = true;
		}
		login_data.value = uni.getStorageSync('login_data');

	})


	// 会员协议状态
	const isAgreed = ref(false);
	// 协议弹窗显示状态
	const showAgreementModal = ref(false);

	// 处理复选框变更
	const handleCheckboxChange = () => {
		// isAgreed.value = e.detail.value.length > 0;
		isAgreed.value = !isAgreed.value;
	};

	// 打开协议弹窗
	const openAgreementModal = () => {
		showAgreementModal.value = true;
	};

	// 关闭协议弹窗
	const closeAgreementModal = () => {
		showAgreementModal.value = false;
	};

	// 同意协议并关闭弹窗
	const agreeAndClose = () => {
		isAgreed.value = true;
		showAgreementModal.value = false;
	};

	// 处理续费按钮点击
	const handleRenew = async () => {

		// if (isVip.value) {
		// 	// 是会员。不能充值
		// 	uni.showModal({
		// 		title: '提示',
		// 		content: '您已经是会员了哦~',
		// 		showCancel: false
		// 	});
		// 	return;
		// }
		if (!isAgreed.value) {
			uni.showModal({
				title: '提示',
				content: '请先阅读并同意会员服务协议',
				showCancel: false
			});
			return;
		}

		// 如果是会员，则修改会员的到期时间，往后一年。改成修改语句



		// 这里添加实际的续费逻辑，例如调用支付接口
		try {
			// 创建订单
			// INSERT INTO recharge_record (user_id,amount) VALUE(71,1)

			let data1 = {
				amount: 28
			}

			let res = await addOrderVipInfo(data1);

			if (res.code == 200) {
				let payData = {
					orderNo: res.data
				}
				let payres = await createVipOrder(payData);
				console.log(payres, 123)
				if (payres.code == 200) {
					wx.requestPayment({
						timeStamp: payres.data.jsConfig.timeStamp,
						nonceStr: payres.data.jsConfig.nonceStr,
						package: payres.data.jsConfig.packageVal,
						paySign: payres.data.jsConfig.paySign,
						signType: payres.data.jsConfig.signType, // 该参数为固定值
						success(res) {
							uni.showToast({
								title: '支付成功',
								icon: 'none'
							})
							// 根据订单状态修改订单状态 修改成为已支付
							let data = {
								orderId: payData.orderNo,
								orderStatus: 2,
								isVip: isVip.value
							}
							console.log(data, "111111111111112222222222222============")
							let res1 = updateVipOrderStatus(data)
							if (res1 && res1.data) {
								endTime.value = res1.data.endTime;
								isVip.value = true;
							}

							uni.navigateBack({
								delta: 1 // 返回的页面数，这里设置为1表示返回上一页
							});


						},
						fail(err) {
							// 支付失败回调
							console.error('唤起支付组件失败：', err);
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							})
							//根据订单状态修改订单状态 修改成为已取消
							let data = {
								orderNo: orderParams.orderNo,
								status: 3
							}
							updateChongZhiOrderStatus(JSON.stringify(data))
						}
					});
				}
			}
		} catch (error) {
			console.error('微信支付处理异常:', error);
			uni.showToast({
				title: '支付处理失败，请重试',
				icon: 'none'
			});
		}
	};
</script>

<style scoped>
	/* 原有样式保持不变 */
	.container {
		padding: 0;
		overflow: hidden;
		height: 200px;
	}

	.points-area {
		background: linear-gradient(to bottom, #ffcb71, #ffe2ad);
		border-radius: 0 0 50% 50% / 0 0 10% 10%;
		height: 344rpx;
		padding: 5rpx 40rpx;
		position: relative;
		overflow: hidden;
	}

	.points-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.points-title {
		font-size: 36rpx;
		font-weight: bold;
		color: white;
	}

	.points-actions {
		display: flex;
	}

	.action-btn {
		color: white;
		font-size: 28rpx;
		padding: 7px;
		border: none;
		background: none;
		margin: 0;
		cursor: pointer;
	}

	.action-btn::after {
		border: none;
	}

	.points-number {
		margin-bottom: 20rpx;
	}

	.number {
		font-size: 80rpx;
		font-weight: bold;
		color: white;
	}

	.points-description {
		margin-bottom: 49rpx;
	}

	.description {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.star-icon {
		position: relative;
		bottom: 104rpx;
		left: 26%;
		height: 350rpx;
	}

	.check-in-area {
		background-color: #ffffff8f;
		border-radius: 20rpx;
		padding: 20rpx;
		margin: -97rpx 32rpx 0;
		position: relative;
		z-index: 10;
		top: -56px;
	}

	.check-in-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.check-in-text {
		font-size: 32rpx;
		font-weight: bold;
	}

	.check-in-btn {
		background-color: #ffe2ad;
		color: #ffcb71;
		border: none;
		border-radius: 50rpx;
		font-size: 28rpx;
		margin: 0;
		font-weight: bold;
		height: 30px;
		line-height: 30px;
	}

	.member-info-container {
		border-radius: 16px;
		padding: 12px 16px;
		display: flex;
		align-items: center;
	}

	.member-info-box {
		display: flex;
		align-items: center;
	}

	.member-avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		margin-right: 12px;
	}

	.member-text-wrap {
		display: flex;
		flex-direction: column;
	}

	.member-title-row {
		display: flex;
		align-items: center;
		margin-bottom: 4px;
	}

	.member-name {
		font-size: 18px;
		font-weight: bold;
		color: #624e2b;
	}

	.member-tag {
		width: 20px;
		height: 20px;
		margin-left: 4px;
	}

	.member-expire {
		font-size: 14px;
		color: #624e2b;
	}

	.container1 {
		padding: 0 20rpx;
	}

	.member-open-section {
		background-color: #fff;
		border-radius: 8px;
		margin: 0 12px;
		padding: 0 16px;
	}

	.member-open-title {
		font-size: 17px;
		font-weight: bold;
		color: #c79a68;
		margin-bottom: 12px;
	}

	.member-card {
		width: 80px;
		border-radius: 8px;
		padding: 12px;
		margin: 16px 0;
		background-color: #fff6ed6b;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		height: 101px;
		box-shadow: 0 0 9px 0px #f38e23;
	}

	.card-duration {
		font-size: 15px;
		color: #333;
		margin-bottom: 4px;
	}

	.card-price {
		font-size: 20px;
		font-weight: bold;
		color: #c79a68;
		margin-bottom: 4px;
	}

	.card-original {
		font-size: 13px;
		color: #999;
		text-decoration: line-through;
	}

	.agreement-row {
		display: flex;
		align-items: center;
		margin-bottom: 16px;
	}

	.agreement-check {
		margin-right: 8px;
	}

	.agreement-text {
		font-size: 14px;
		color: #666;
	}

	.agreement-link {
		color: #c79a68;
		margin-left: 2px;
	}

	.renew-btn {
		width: 100%;
		background: linear-gradient(to left, #ffcb71, #ffe2ad);
		color: #9c7851;
		font-size: 16px;
		padding: 4px 0;
		border-radius: 25px;
		border: none;
		margin: 10px 0;
	}

	.renew-btn::after {
		border: none;
	}

	.bottom-tip {
		font-size: 13px;
		color: #999;
		text-align: center;
		margin-top: 8px;
	}

	/* 新增的会员协议弹窗样式 */
	.agreement-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal-mask {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.modal-content {
		position: relative;
		width: 80%;
		max-height: 80%;
		background-color: #fff;
		border-radius: 12px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 20px;
		border-bottom: 1px solid #eee;
	}

	.modal-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.modal-close {
		font-size: 24px;
		color: #999;
		cursor: pointer;
	}

	.modal-body {
		padding: 20px;
		flex: 1;
		overflow-y: auto;
	}

	.agreement-content {
		font-size: 14px;
		color: #666;
		line-height: 1.8;
	}

	.modal-btn {
		width: 100%;
		padding: 12px 0;
		background: linear-gradient(to left, #ffcb71, #ffe2ad);
		color: #c79a68;
		font-size: 16px;
		font-weight: bold;
		border: none;
		border-radius: 0;
	}
</style>